﻿/**
 *	html/monitor/center/device/panel_device_info.js
 *
 *	(C) 2014 Yuanjj
 *
 * 	history:
 * 		2014-09-04		create the file
 */

/**
 *	show device info
 *
 *	@id					[in] device id
 *	@panel_center		[in] the center panel
 */
function show_device_info( id, panel_center )
{
    var dev_cmp		= Ext.getCmp( id );
    var	record 		= g_device.findRecord( "dev_id", dev_cmp.dev_id );
    var dev_type	= record.get( "dev_type" );
    var	dev_grp		= "";

    switch( dev_type )
    {
    case "themometor":
    case "hygrometer":
    case "anemograph":
    case "sf6":
        dev_grp	= "evn"; break;
    case "light":
    case "smoke":
    case "guard":
        dev_grp	= "switch"; break;
    case "infrared":
    case "dbinfrared":
        dev_grp	= "security"; break;
    default:
        break;
    }

    if ( "" !== dev_grp )
        __show_device_info( dev_grp, dev_cmp, record );

    g_current_selected = id;
}

var g_device_info_form;				// device base info object
var g_device_chart_form;			// device chart object
var g_device_alarm_form;			// device alarm info object
var g_device_operator_form;			// device operator object
var	g_info_width			= 450;
var g_operator_width		= 200;

/**
 *	show device information
 *
 *	@dev_grp		[in] the device group( "evn", "switch" or "security" )
 *	@dev_cmp		[in] the device component
 *	@dev_rcd		[in] the device record
 */
function __show_device_info( dev_grp, dev_cmp, dev_rcd )
{
    var bg_cmp		= Ext.getCmp( "panel_c_scene" );
    var x 			= dev_cmp.getLocalX() - bg_cmp.body.dom.scrollLeft + dev_cmp.getWidth() + 5;
    var y 			= dev_cmp.getLocalY() - bg_cmp.body.dom.scrollTop;
    var	range		= {"width":0, "height":0};

    range = __create_forms( dev_grp );

    x = _amend_x( x, range["width"], bg_cmp, dev_cmp );
    y = _amend_y( y, range["height"], bg_cmp, dev_cmp );

    __show_forms( x, y, dev_rcd, dev_grp );
}

function __create_forms( dev_grp )
{
    var		range = {"width":0, "height":0};

    switch( dev_grp )
    {
    case "evn":
        range = __create_evn_forms(); break;
    case "switch":
        range = __create_switch_forms(); break;
    case "security":
        range = __create_security_forms();	break;
    default:
        break;
    }

    return range;
}

function __create_evn_forms()
{
    var range = {"width":g_info_width, "height":0};

    if ( undefined === g_device_info_form )
        g_device_info_form 	= __create_device_info();
    range["height"] += g_device_info_form.getHeight();

    if ( undefined === g_device_chart_form )
        g_device_chart_form = __create_device_chart();
    range["height"] += g_device_chart_form.getHeight();

    if ( undefined === g_device_alarm_form )
        g_device_alarm_form	= __create_device_alarm();
    range["height"] += g_device_alarm_form.getHeight();

    return range;
}

function __create_switch_forms()
{
    var range = {"width":g_operator_width, "height":0};

    if ( undefined === g_device_operator_form )
        g_device_operator_form = __create_device_operator();
    range["height"] += g_device_operator_form.getHeight();

    return range;
}

function __create_security_forms()
{
    var range = {"width":g_info_width, "height":0};

    if ( undefined === g_device_info_form )
        g_device_info_form 	= __create_device_info();
    range["height"] += g_device_info_form.getHeight();

    if ( undefined === g_device_alarm_form )
        g_device_alarm_form	= __create_device_alarm();
    range["height"] += g_device_alarm_form.getHeight();

    return range;
}

function __show_forms( x, y, dev_rcd, dev_grp )
{
    switch( dev_grp )
    {
    case "evn":
        __show_evn_forms( x, y, dev_rcd ); break;
    case "switch":
        __show_switch_forms( x, y, dev_rcd ); break;
    case "security":
        __show_security_forms( x, y, dev_rcd ); break;
    default:
        break;
    }
}

function __show_evn_forms( x, y, dev_rcd )
{
    if ( undefined !== g_device_info_form )
    {
        //g_device_info_form.update_label( dev_rcd.get( "dev_type" ) );
        g_device_info_form.loadRecord( dev_rcd );
        g_device_info_form.showAt( x, y );
        y += g_device_info_form.getHeight() + 5;
    }

    if ( undefined !== g_device_chart_form )
    {
        g_device_chart_form.showAt( x, y );
        y += g_device_chart_form.getHeight() + 5;
    }

    if ( undefined !== g_device_alarm_form )
    {
        _alarm_record_filter( dev_rcd );
        g_device_alarm_form.showAt( x, y );
    }
}

function __show_switch_forms( x, y, dev_rcd )
{
    if ( undefined !== g_device_operator_form )
    {
        g_device_operator_form.showAt( x, y );
        y += g_device_operator_form.getHeight() + 5;
    }
}

function __show_security_forms( x, y, dev_rcd )
{
    if ( undefined !== g_device_info_form )
    {
        //g_device_info_form.update_label( dev_rcd.get( "dev_type" ) );
        g_device_info_form.loadRecord( dev_rcd );
        g_device_info_form.showAt( x, y );
        y += g_device_info_form.getHeight() + 5;
    }

    if ( undefined !== g_device_alarm_form )
    {
        _alarm_record_filter( dev_rcd );
        g_device_alarm_form.showAt( x, y );
    }
}

function _amend_x( x, show_width, bg_cmp, dev_cmp )
{
    var		bg_dom		= bg_cmp.body.dom;
    var		dev_width	= dev_cmp.getWidth();
    var		res 		= x;

    if ( bg_dom.offsetWidth - x > show_width )
        res = x;
    else  if ( x - dev_width > show_width + 5)
        res = x - dev_width - show_width - 10;

    return res + bg_dom.scrollLeft;
}

function _amend_y( y, show_height, bg_cmp, dev_cmp )
{
    var		bg_dom		= bg_cmp.body.dom;
    var		res = y;

    if ( bg_dom.offsetHeight - y > show_height )
        res = y;
    else  if ( bg_dom.offsetHeight - 20 < show_height )
        res = 0;
    else
        res = bg_dom.offsetHeight - show_height - 20;

    return res + bg_dom.scrollTop;
}

/**
 *	hide device info panels if none of the them are selected
 */
function hide_device_info(evt, el)
{
    var		info_form 		= (undefined !== g_device_info_form);
    var		chart_form		= (undefined !== g_device_chart_form);
    var		alarm_form		= (undefined !== g_device_alarm_form);
    var		operator_form	= (undefined !== g_device_operator_form);

    if ( (info_form && g_device_info_form.getEl().contains(el)) ||
         (chart_form && g_device_chart_form.getEl().contains(el)) ||
         (alarm_form && g_device_alarm_form.getEl().contains(el)) ||
         (operator_form && g_device_operator_form.getEl().contains(el)) )
        return;

    if ( info_form ) 		g_device_info_form.hide();
    if ( chart_form )		g_device_chart_form.hide();
    if ( alarm_form ) 		g_device_alarm_form.hide();
    if ( operator_form ) 	g_device_operator_form.hide();

    g_current_selected = undefined;
};

/**
 *	create device info form
 */
function __create_device_info()
{
    var device_info_form = Ext.create
    ("Ext.form.Panel", {
         id:"panel_device_info", title:"设备基本信息", frame:true, floating:true, width:g_info_width, height:110, renderTo:g_bg_div,
         layout:{type:"hbox", align:"stretch"},
         items:[
             {xtype:"fieldset", collapsible:false, defaultType:"displayfield", width:220, margin:"0 0 0 0", padding:"0 2 0 2",
                 items:[
                      {name:"dev_type", fieldLabel:"监测类型", labelWidth:60, renderer:render_device_type},
                      {name:"dev_pos", fieldLabel:"具体位置", labelWidth:60},
                      {name:"machine", fieldLabel:"器件型号", labelWidth:60},
                ]
             },
             {xtype:"fieldset", collapsible:false, defaultType:"displayfield", width:220, margin:"0 0 0 0", padding:"0 2 0 2",
                 items:[
                      {name:"dev_id", fieldLabel:"监测点号", labelWidth:60},
                      {id:"show_date", name:"add_time", fieldLabel:"加入时间", labelWidth:60 },
                      {id:"current_value", name:"value", fieldLabel:"当前值", labelWidth:60 },
                ]
             }
         ]
    });

    device_info_form.update_label = __update_label;

    return device_info_form;
}

/**
 *	renderer for device type name
 *
 *	@val		[in] the original value of the field
 *	@meta		[in] ??
 *
 *	return
 *		the new value for showing
 */
function render_device_type( val, meta )
{
    var rcd = g_device_type.findRecord( "type", val );
    if ( null === rcd )
        return val;
    else
        return rcd.get( "name" );
}

/**
 *	update device info panel field label
 *
 *	@dev_type			[in] device type
 */
function __update_label( dev_type )
{
    var type_record = g_device_type.findRecord( "type", dev_type )

    if ( null === type_record )
        return;

    var name = "当前" + type_record.get( "name" ) + ":";
    Ext.DomQuery.selectNode( "label[id^=current_value]" ).innerHTML = name;
}

/**
 *	create device chart
 */
function __create_device_chart()
{
    var	device_chart_form = Ext.create
    ("Ext.panel.Panel", {
        frame:true, title:"近期检测变化", width:g_info_width, height:250, renderTo:g_bg_div, floating:true, layout:"fit",
        items:[{
            xtype:"chart",
            store:g_device_values,
            background:{
                gradient: {
                    angle:90,
                    stops:{ 0:{color:"#fff"}, 100:{color:"#def"} }
                }
            },
            axes:[
                { type:"Numeric", title:"气温（单位：℃）", position:"left", fields:["value"] },
                { type:"Category", title:"时刻", position:"bottom", fields:["datetime"] },
            ],
            series:[ { type:"line", axis:"left", xField:"datetime", yField:"value" } ]
        }]
    });

    return device_chart_form;
}

/**
 *	create device alarm panel
 */
function __create_device_alarm()
{
    var	device_alarm_form = Ext.create
    ("Ext.grid.Panel",{
         id:"grid_alarm_record", title:"历史报警记录", frame:true, renderTo:g_bg_div, floating:true,
         width:g_info_width, height:145, store:g_alarm_record,
         columns:[
             {xtype:"rownumberer", header:"序号", width:50, align:"center"},
             {header:"时间", width:150, dataIndex:"datetime", align:"center"},
             {header:"值", width:100, dataIndex:"value", align:"center"},
         ]
    });

    return device_alarm_form;
}

/**
 *	create device operator panel
 */
function __create_device_operator()
{
    var device_operator_form = Ext.create
    ("Ext.form.Panel",{
         frame:true, renderTo:g_bg_div, floating:true, buttonAlign:"center",
         width:g_operator_width, height:60,
         items:[
             {xtype:"label", text:""}
         ],
         buttons:[
             {text:"确定", handler:on_change_status},
             {text:"取消", handler:on_cancel_operator}
         ]
    });

    return device_operator_form;
}

/**
 *	call back for ok button on device status form
 */
function on_change_status()
{
    var dev_cmp		= Ext.getCmp( g_current_selected );
    var dev_rcd		= g_device.findRecord( "dev_id", dev_cmp.dev_id );

    _set_device_status( dev_cmp, dev_rcd );			// change the device pitcure
    //update_device_status( dev_cmp, dev_rcd );		// inform the host to change the device status

    g_device_operator_form.hide();
    g_current_selected = undefined;
}

/**
 *	call back for cancel button on device status form
 */
function on_cancel_operator()
{
    g_device_operator_form.hide();
    g_current_selected = undefined;
}

/**
 *	set device status
 *
 *	@dev_cmp		[in] the device component object
 *	@dev_rcd		[in] the device record
 */
function _set_device_status( dev_cmp, dev_rcd )
{
    var		src;
    var		dev_status	= g_device_status[dev_rcd.get("dev_type")];
    var		status		= dev_rcd.get("value");

    if ( (undefined !== dev_status) && (0 !== dev_status["status"]) && (undefined !== dev_status[status]) )
        dev_cmp.el.query("img:first")[0].src = dev_status[status];
}
